<template>
  <div class="main">
    <view class="box">
      <view class="flex justifyBetween">
        <view class="flex alignCenter">
          <uv-avatar bg-color="#FFEFD8" size="50" src="https://oss.seenlove.com/images/3ab047cffc0114e84f41088b7829eb03.png"></uv-avatar>
          <view class="left">
            <view class="name flex alignCenter fz14">官方小助手
              <view class="tags">官方</view>
            </view>
            <view class="desc fz12">在这里完成「实名、学历、工作」…</view>
          </view>
        </view>
        <view class="right">
          <view class="time fz12">22:55</view>
          <view class="flex justifyFlexEnd">
            <!-- v-if="item.unread" -->
            <view class="dot">1</view>
          </view>
        </view>
      </view>
      <uv-divider text=""></uv-divider>
    </view>

    <view class="box" v-for="(item, index) in list" :key="index" @click="toChat(item.lastMsg)">
      <view class="flex justifyBetween alignCenter">
        <view class="flex alignCenter">
          <uv-avatar bg-color="#FFEFD8" size="50" :src="avatar_format(item.lastMsg)"></uv-avatar>
          <view class="left">
            <view class="name flex alignCenter fz14">{{name(item.lastMsg)||'暂未获取到昵称'}}</view>
            <view class="desc fz12">{{desc(item.lastMsg)}}</view>
          </view>
        </view>
        <view class="right">
          <view class="time fz12">{{proxy.$utils.dateTimeFormateFn(item.updateTime,"all")}}</view>
          <view class="flex justifyFlexEnd" v-if="item.unread">
            <view class="dot">{{item.unread}}</view>
          </view>

        </view>
      </view>
      <uv-divider text=""></uv-divider>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

import nimStore from "@/stores/nim";
const nim = nimStore();

let nameCards = [];
let list = ref([]);

async function getInfo() {
  let resp = await nim.getSessions();
  let accounts = [];
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index].lastMsg;
    accounts.push(element.from);
    accounts.push(element.to);
  }
  accounts = proxy.$utils.duplicateRemoval(accounts);
  nameCards = await nim.getUsersNameCardFromServer(accounts);
  console.log("nameCards", nameCards);
  console.log("会话", resp);
  list.value = resp.sort(proxy.$utils.compare("updateTime", "sort"));
}

function avatar_format(e) {
  let userId = counter.slParams.userInfo.userId == e.from ? e.to : e.from;
  let index = proxy.$utils.findIndexByField(nameCards, "account", userId);
  if (index != -1) return nameCards[index].avatar;
}

function name(e) {
  let userId = counter.slParams.userInfo.userId == e.from ? e.to : e.from;
  let index = proxy.$utils.findIndexByField(nameCards, "account", userId);
  if (index != -1) return nameCards[index].nick;
}

function desc(e) {
  if (e.type == "text") return e.body;
  if (e.type == "image") return "[图片]";
  if (e.type == "audio") return "[语音]";
  if (e.type == "geo") return "[位置]";
}

function toChat(e) {
  let userId = counter.slParams.userInfo.userId == e.from ? e.to : e.from;
  proxy.$utils.toLink(`/packagePages/chatIm/chat?userId=${userId}`);
}

watch(
  () => nim.sessions,
  (newValue, oldValue) => {
    if (newValue) getInfo();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.box {
  .left {
    margin-left: 10px;
    .name {
      color: #333333;
      .tags {
        border: 1px solid #9e06ff;
        border-radius: 3px;
        padding: 0 8px;
        color: #9e06ff;
        margin-left: 5px;
      }
    }
    .desc {
      color: #999999;
      margin-top: 2px;
    }
  }
  .right {
    .time {
      color: #999999;
    }
    .dot {
      color: white;
      background-color: #ff3b3b;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>
